<!-- 
  @name: 添加蓄注流水
  @date: 2020.3.11
 -->
<template>
	<view class="content">
		<!-- 顶部输入区 -->
		<view class="topview">
			<view class="item">
				<view class="left">蓄注加注机</view>
				<view class="right" @tap="$navigateTo('/pages/common/macList')">
					<view class="t" v-text="macName ? macName : '选择蓄注加注机'"></view>
					<view class="arrow_nav"></view>
				</view>
			</view>
			<view class="item">
				<view class="left">蓄注时间</view>
				<view class="right">
					<picker class="t2" mode="date" :value="date1" @change="dateChe1">
						<text>{{date1}}</text>
					</picker>
					<picker class="t" mode="time" :value="time1" @change="timeChe1">
						<text>{{time1}}</text>
					</picker>
					<view class="arrow_nav"></view>
				</view>
			</view>
			<view class="item">
				<view class="left">蓄注量(kg)</view>
				<input type="digit" class="int" placeholder="请输入蓄注量"
					placeholder-class="phcolor" v-model.trim="recordNum" />
			</view>
			<view class="item bn">
				<view class="left">供应商</view>
				<input class="int" placeholder="请输入供应商"
					placeholder-class="phcolor" v-model.trim="operatorName" />
			</view>
		</view>
		
		<!-- 上传单据 -->
		<view class="upview">
			<view class="left">上传蓄注单据：</view>
			<image
				class="img"
				:src="recordImage
					  ? recordImage
					  : 'http://img.etubang.com/group1/M00/00/41/rBCky15l6cWABYxuAAASC_8JmJU725.png'"
				@tap="chooseImg">
			</image>
		</view>
		
		<!-- 按钮 -->
		<view class="btn_pub_blank"></view>
		<view class="btn_pub bottom" @tap="submit">提交</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				date1: '请选择日期',
				time1: '请选择时间',
				//信息
				macName: '',
				machineId: '',
				recordsTime: '',
				recordNum: '',
				operatorName: '',
				recordImage: ''
			}
		},
		onLoad() {
			uni.$on('common_chooseMac', this.chooseMac);
		},
		onUnload() {
			uni.$off('common_chooseMac', this.chooseMac);
		},
		methods: {
			//监听选择加注机
			chooseMac(e) {
				this.macName = e.macName;
				this.machineId = e.machineId;
			},
			//request
			submit2() {
				this.$http({
					url: this.$api.recordUrl + 'addfillrecord',
					data: {
						machineId: this.machineId,
						recordsTime: this.recordsTime,
						recordNum: this.recordNum,
						operatorName: this.operatorName,
						recordImage: this.recordImage
					}
				}).then(res => {
					this.$successToast('添加成功！');
					setTimeout(() => {
						uni.$emit('setFill_addFillRec', {});
					}, this.$tmp.TIME_SUC);
					this.$sucBack();
				});
			},
			//提交
			submit() {
				if(!this.macName) {
					this.$showToast('请选择加注机！');
					return;
				}
				if(!this.recordNum) {
					this.$showToast('请输入蓄注量！');
					return;
				}
				if(!this.operatorName) {
					this.$showToast('请输入供应商！');
					return;
				}
				if(this.date1.indexOf('-') < 0) {
					this.$showToast('请选择日期！');
					return;
				}
				if(this.time1.indexOf(':') < 0) {
					this.$showToast('请选择时间！');
					return;
				}
				this.recordsTime = this.date1 + ' ' + this.time1;
				this.submit2();
			},
			//更改蓄注日期
			dateChe1(e) {
				this.date1 = e.target.value;
			},
			timeChe1(e) {
				this.time1 = e.target.value;
			},
			//选择单据
			chooseImg() {
				uni.chooseImage({
					count: 1,  //最多选择个数
					success: (data) => {
						let path = data.tempFilePaths[0];
						this.$http({
							upload: true,
							filePath: path
						}).then(res => {
							this.recordImage = res;
						});
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	/* 顶部输入区 */
	.topview {
		width: 750rpx;
		padding-left: 40rpx;
		background-color: $color-white;
		.item.bn {
			border-bottom: none;
		}
		.item {
			width: 100%;
			height: 100rpx;
			padding-right: 40rpx;
			border-bottom: 1rpx solid $color-list;
			display: flex;
			flex-direction: row;
			align-items: center;
			.left {
				width: 260rpx;
			}
			.int,
			.right {
				flex: 1;
			}
			.right {
				display: flex;
				flex-direction: row;
				align-items: center;
				.t {
					flex: 1;
				}
				.t2 {
					margin-right: 50rpx;
				}
			}
		}
	}
	
	/* 上传单据 */
	.upview {
		width: 750rpx;
		height: 200rpx;
		padding-left: 40rpx;
		margin-top: $spacing-col;
		background-color: $color-white;
		display: flex;
		flex-direction: row;
		align-items: center;
		.left {
			width: 260rpx;
		}
		.img {
			width: 120rpx;
			height: 120rpx;
			border-radius: $border-radius-bm;
		}
	}
	
</style>
